<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <div id="mainexcel" class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div id="users" class="grid-content bg-purple">
          <div class="grid-content-list1 col" style="background:#6a85fe;">
            <div class="grid-content-list1-names">用户数</div>
            <div class="grid-content-list1-number">8965212</div>
          </div>
          <div class="grid-content-list1" style="background:#8ed464;">
            <div class="grid-content-list1-names">昨日收益</div>
            <div class="grid-content-list1-number">23232</div>
          </div>
          <div class="grid-content-list1" style="background:#9f85fe;" @click="changeToken">
            <div class="grid-content-list1-names">总收益</div>
            <div class="grid-content-list1-number">894563</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16" style="justify-content:center;">
        <div class="grid-content1 bg-purple row">
          <el-progress type="circle" :percentage="number" :width="width" status="text">CPU</el-progress>
          <el-progress
            type="circle"
            :percentage="number1"
            :width="width"
            color="#8e71c7"
            status="text"
          >MEMORIES</el-progress>
          <el-progress
            type="circle"
            :percentage="number2"
            :width="width"
            color="#8e71c7"
            status="text"
          >USER ADD</el-progress>
          <el-progress
            type="circle"
            :percentage="number3"
            :width="width"
            color="#8e71c7"
            status="text"
          >INCOME</el-progress>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content1 bg-purple">
          <h4 class="grid-content1-title tleft">消息列表</h4>
          <div
            class="grid-content1-content tleft"
            v-for="(item,index) in news_list"
            :key="index"
          >{{index+1}}.{{item.content}}</div>
          <div>{{token}}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import "echarts/theme/macarons.js";
export default {
  name: "system",
  data() {
    return {
      msg: "欢迎来到数据中心",
      number: 55,
      number1: 45,
      number2: 75,
      number3: 25,
      width: 160,
      news_list: [
        { content: "从零到精通学会微信公众平台运营" },
        { content: "从零到精通学会微信公众平台运营" },
        { content: "从零到精通学会微信公众平台运营" },
        { content: "从零到精通学会微信公众平台运营" },
        { content: "从零到精通学会微信公众平台运营" }
      ]
    };
  },
  computed:{
       token(){
         return this.$store.state.token
       }
  },
  mounted() {
    this.initEcharts();
    this.changeNumber();
  },
  methods: {
    changeToken(){
       this.$store.commit('updateToken','wdwdwfwfwfdwdwdfwfdwfdwfw')
    },
    initEcharts() {
      let echarts = this.$echarts.init(
        document.getElementById("mainexcel"),
        "macarons"
      );
      console.log('store',this.$store.state)
      console.log(echarts);
      var xAxisData = [];
      var data1 = [];
      var data2 = [];
      for (var i = 0; i < 100; i++) {
        xAxisData.push("类目" + i);
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
      }
      let option = {
        title: {
          text: "系统数据"
        },
        legend: {
          data: ["bar", "bar2"],
          align: "center"
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ["stack", "tiled"]
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2
            }
          }
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          silent: false,
          splitLine: {
            show: false
          }
        },
        yAxis: {},
        series: [
          {
            name: "bar",
            type: "bar",
            data: data1,
            width: {
              type: Number,
              default: 160
            },
            animationDelay: function(idx) {
              return idx * 10;
            }
          },
          {
            name: "bar2",
            type: "bar",
            data: data2,
            animationDelay: function(idx) {
              return idx * 10 + 100;
            }
          }
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      };
      echarts.setOption(option);
    },
    changeNumber() {
      setInterval(
        function() {
          this.number = parseInt(Math.random() * 100);
          this.number1 = parseInt(Math.random() * 100);
          this.number2 = parseInt(Math.random() * 100);
          this.number3 = parseInt(Math.random() * 100);
        }.bind(this),
        1000
      );
    }
  }
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 50vh;
  padding: 20px;
  box-shadow: 0px 0px 1px 1px #999999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.grid-content1 {
  border-radius: 4px;
  min-height: 25vh;
  padding: 20px;
  box-shadow: 0px 0px 1px 1px #999999;
  justify-content: space-between;
  align-items: center; /*垂直居中*/
}
.row-bg {
  padding: 0px 0;
  background-color: #ffffff;
}
.grid-content-list1 {
  height: 120px !important;
  border-radius: 4px;
  color: #fff;
}
.grid-content-list-img {
  width: 70px;
  height: 70px;
  margin: 20px auto;
}
.grid-content-list-txt-number {
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  margin-top: 10px;
}
.grid-content-list-txt-title {
  height: 30px;
  line-height: 30px;
}
.grid-content-list1-names {
  font-size: 18px;
  margin-top: 20px;
}
.grid-content-list1-number {
  margin-top: 10px;
  font-size: 26px;
}
.yibiaopan {
  width: 300px;
  height: 300px;
}
.grid-content1-title {
  border-bottom: 1px dashed #bdbdbd;
  padding-bottom: 8px;
}
.grid-content1-content {
  padding: 5px 0 0 0;
  color: #707070;
}
</style>
